<template>
  <div id="designTask">
    <div class="designTaskContent">
      <div class="designTaskContentLeft">
        <ul>
          <li v-for="(item, index) in productionTasks" :key="index" @click="jumpTo('/designTaskDetail?taskId=' + item.id)">
            <h2>{{item.title}}</h2>
            <span>发布时间：{{item.createTime}}</span>
            <span>任务价格：{{item.price}}</span>
            <span>任务时效：{{item.expiryDate}}天</span>
            <!-- <div class="designTaskContentLeftAskfor">设计要求：<p class="noWarp" style="padding-left: .2rem;"></p></div> -->
            <div class="designTaskContentLeftAskfor">设计要求：<p v-html="item.designerAsk" class="noWarp" style="padding-left: .2rem;"></p></div>
          </li>
        </ul>
        <div class="pageNumber" v-if="pageTotals != 0">
          <div @click="prevPage(classifyId)">上一页</div>
          <div @click="nowPage(item, classifyId)" :class="{pageActive: pageActiveIndex === item}" v-for="(item, index) in pageTotals" :key="index">{{item}}</div>
          <div @click="nextPage(classifyId)">下一页</div>
        </div>
      </div>
      <div class="designTaskContentRight">
        <ul>
          <li>
            <label for="designTaskSearch">
              <input id="designTaskSearch" type="text" placeholder="搜索..." v-model="searchText" @keydown.enter="fetchNeedsList()">
              <img src="../../assets/img/ideaMarket/sear.png" alt="">
            </label>
          </li>
          <li v-for="(item, index) in kindTabData" :key="index">
            <p :class="{avtive: kindTabIndex === index}" @click="onKindTab(index, item.classifyId)">{{item.classifyName || item}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import pageNumber from '../../components/pageNumber'
export default {
  name: 'designTask',
  // components: {
  //   pageNumber
  // },
  data () {
    return {
      pageTotals: 1,
      pageActiveIndex: 1,
      data: '',
      kindTabIndex: 0,
      kindTabData: ['全部', '画册', '海报', '数字媒体', '文创产品', '工艺品', '个性化', '包装'],
      productionTasks: [],
      searchText: '',
      classifyId: ''
    }
  },
  created () {
    this.fetchSkillSelectClassify()
    this.fetchNeedsList(1)
  },
  methods: {
    // 上一页
    prevPage () {
      if (this.pageActiveIndex > 1) {
        this.pageActiveIndex--
        this.fetchNeedsList()
      }
    },
    // 下一页
    nextPage () {
      if (this.pageTotals > this.pageActiveIndex) {
        this.pageActiveIndex++
        this.fetchNeedsList()
      }
    },
    // 选择页码
    nowPage (index) {
      this.pageActiveIndex = index
      this.fetchNeedsList()
    },
    onKindTab (val, classifyId) {
      if (this.kindTabIndex === val) {
        return
      }
      this.classifyId = classifyId
      this.kindTabIndex = val
      this.pageActiveIndex = 1
      this.fetchNeedsList()
    },
    // 获取右侧分类
    fetchSkillSelectClassify () {
      this.$api.getSkillSelectClassify({
      }).then(res => {
        if (res.code === 0) {
          this.kindTabData = [{classifyName: '全部'}, ...res.data]
        }
      })
    },
    // 获取设计制作任务详情
    fetchNeedsList () {
      this.$api.getNeedsList({
        typeId: this.classifyId,
        title: this.searchText,
        pageNum: this.pageActiveIndex
      }).then(res => {
        this.productionTasks = res.data
        this.pageTotals = Math.ceil(res.total / 10)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#designTask{
  .designTaskContent{
    width: 1200px;
    margin: auto;
    font-size: 0;
    padding: .5rem 0;
    .designTaskContentLeft{
      width: 70%;
      display: inline-block;
      vertical-align: top;
      .pageNumber{
        width: 100%;
        height: 50px;
        padding: .2rem;
        text-align: center;
        .pageActive{
          color: #fff;
          background-color: #15A29C;
        }
        div{
          display: inline-block;
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          background-color: #fff;
          padding: .03rem .1rem;
          margin: 0 .05rem;
        }
      }
      ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        border-radius: .1rem;
        overflow: hidden;
        li{
          width: 100%;
          background-color: #fff;
          padding: .2rem;
          border-bottom: 1px solid #eee;
          h2{
            font-size: .2rem;
            line-height: .28rem;
            font-weight: 500;
            color: #15a29c;
            padding-bottom: .2rem;
          }
          span{
            font-size: .14rem;
            line-height: .22rem;
            font-weight: 500;
            color: #999999;
            display: block;
          }
          .designTaskContentLeftAskfor{
            font-size: .16rem;
            line-height: .24rem;
            font-weight: 500;
            color: #333;
            padding-top: .2rem;
            // p{
            //   font-size: .16rem;
            //   line-height: .24rem;
            //   font-weight: 500;
            //   color: #333;
            // }
            .noWarp{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-weight: bold;
              font-size: .15rem;
            }
          }
        }
      }
    }
    .designTaskContentRight{
      width: 30%;
      display: inline-block;
      vertical-align: top;
      padding-left: .2rem;
      ul{
        li{
          background-color: #fff;
          border-radius: .1rem;
          height: .5rem;
          margin-bottom: .15rem;
          overflow: hidden;
          label{
            display: inline-block;
            width: 100%;
            height: 100%;
            position: relative;
            input#designTaskSearch {
              display: inline-block;
              width: 100%;
              height: 100%;
              padding-left: .2rem;
              padding-right: .5rem;
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .5rem;
            }
            img{
              width: .25rem;
              height: .25rem;
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          p{
            line-height: 0.5rem;
            font-size: 0.2rem;
            font-weight: bold;
            color: #333;
            text-align: center;
          }
          p.avtive{
            color: #15a29c;
          }
        }
      }
    }
  }
}
</style>
